<template>
  <div class="home">
    <h1>移动应用打包页面</h1>
    <div class="home-application-choose">
      <el-select
        v-model="applicationValue"
        placeholder="请选择需要打包的应用"
        @change="change"
      >
        <el-option
          v-for="item in application"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="home-choose" v-show="applicationValue != ''">
      <el-select v-model="value" placeholder="请选择环境" @change="change">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="home-input" v-show="value != ''">
      <el-input
        style="display: none"
        placeholder="请输入版本号(格式:1.0.0)"
        v-model="input"
      ></el-input>
      <el-input
        placeholder="请输入版本号(格式:1.0.0)，"
        v-model="onInput"
      ></el-input>
      <el-button type="primary" :disabled="isDisable" @click="build()"
        >打包</el-button
      >
    </div>

    <el-button
      style="margin-top: 0.2rem"
      type="primary"
      @click="downLoad()"
      v-show="downLoadUrl != ''"
      >{{ downMessage }}</el-button
    >

    <el-button
      style="margin-top: 0.2rem"
      type="primary"
      @click="promptly()"
      v-show="applicationValue"
      >不打包直接下载</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      application: [
        {
          value: "enterprise",
          label: "企业端"
        },
        {
          value: "goverment",
          label: "政府端"
        },
        {
          value:"aky",
          label:"安科院"
        }
      ],
      applicationValue: "",
      options: [
        {
          value: "正式环境",
          label: "正式环境",
          version: ""
        },
        {
          value: "测试环境",
          label: "测试环境",
          version: ""
        }
      ],
      value: "",
      input: "",
      isDisable: false,
      downMessage: "下载",
      downLoadUrl: ""
      // showPromptly:false
    };
  },
  methods: {
    promptly: function() {
      this.axios
        .get("down", {
          params: {
            type: this.value,
            version: this.input,
            application: this.applicationValue
          }
        })
        .then(e => {
          window.location.href = e.data.url;
        })
        .catch(() => {
          this.$message({
            message: "服务器链接失败"
          });
        });
    },
    build: function() {
      if (this.value == "" || this.input == "") {
        this.$message({
          message: "请检查填写信息",
          type: "warning",
          offset: 300
        });
        return;
      }
      this.isDisable = true;
      this.downMessage = "准备打包生成，请耐心等待（一般5分钟之内）";
      this.axios
        .get("generate", {
          params: {
            type: this.value,
            version: this.input,
            application: this.applicationValue
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.downLoadUrl = res.data.url;
            this.downMessage = "下载";
          } else {
            this.$message({
              message: "请稍等，其他人正在打包"
            });
          }
          this.isDisable = false;
        })
        .catch(error => {
          this.isDisable = false;
          console.log(error);
        });
    },
    downLoad: function() {
      if (this.downMessage == "下载" && this.downLoadUrl != "") {
        window.location.href = this.downLoadUrl;
      } else {
        this.$message({
          message: "正在打包，请稍等"
        });
      }
    },
    change: function(value) {
      if (this.applicationValue == "enterprise") {
        //  this.showPromptly = false;
        if (value == "正式环境") {
          // this.showPromptly = true;
          this.axios
            .get("https://sc.api.app.e.sctshz.com/appVersionConfig")
            .then(res => {
              this.getVersion(res);
            });
        } else if (value == "测试环境") {
          // this.showPromptly = true;
          this.axios
            .get("http://lyco.18000541860.com:30102/appVersionConfig")
            .then(res => {
              this.getVersion(res);
            });
        }
      }
    },
    getVersion: function(res) {
      let _version = res.data.data.version;
      let _versionSplit = _version.split(".");
      let nextVersion = _versionSplit[2] * 1 + 1;
      let allVersion =
        _versionSplit[0] + "." + _versionSplit[1] + "." + nextVersion;
      this.input = allVersion;
    }
  },
  computed: {
    onInput: {
      get() {
        return this.input;
      },
      set(value) {
        let currenValue = value[value.length - 1];
        if (
          !isNaN(currenValue * 1) ||
          currenValue == "." ||
          currenValue == undefined
        ) {
          this.input = value;
          return value;
        } else {
          return;
        }
        // return value;
      }
    }
  },
  mounted() {
    // this.axios.get("/version").then(res => {
    //   if (res.data.code === 200) {
    //     res.data.message.filter((item, index) => {
    //       this.options[index]["version"] = item;
    //     });
    //   }
    // });
  }
};
</script>

<style lang="less" scoped>
.home {
  &-input {
    display: flex;
    // justify-content: space-between;
    justify-content: center;
    .el-input {
      width: auto;
    }
    .el-button {
      margin-left: 0.2rem;
    }
    //  max-width: 800px;
  }
  &-choose {
    // display: flex;
    // justify-content: space-between;
    max-width: 800px;
    margin: 0.2rem auto;
  }
  text-align: center;
  font-size: 0.3rem;
}
</style>
